<template>
  <!-- 兑换订单子组件 -->
  <div class="box">
    <div class="listdiv" v-for="(item, index) in stores.data" :key="index">
  
      <p class="p1">
        订单详情 <span>{{ item.exorderId }}</span>
      </p>
      <div class="listdivImg" @click="$emit('btnTix2',index)">
        <img src="@/img/门店图片/u2732.png" alt="" />
        <div class="listdivImgp">
          <p>{{ item.note }}</p>
          <p v-show="flag">{{ item.time }} </p>
          <p class="price" v-show="flag2">{{item.gPrice}}币</p>
          <p class="time" v-show="flag1">支付剩余时间: <span><van-count-down class="time" :time="time" /></span></p>
          <p class="p2" v-show="flag" >已等待 </p>
          <p class="P3" v-show="flag3" >取货门店:OMINI来福士店</p>
          <p class="P44444444" v-show="flag4">预计送达时间:2019年8月11日</p>
        </div>
      </div>
      <button class="butn1" @click="$emit('btnTix',index)" v-show="Btnfalg">{{ Btntext1 }}</button>
      <button v-show="Btnfalg1" @click="$emit('btnTix1',index)">{{ Btntext }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ExchangeInfo } from ".././../../stores/ExchangeOrder"

const stores = ExchangeInfo()



defineEmits(["btnTix", "btnTix1", "btnTix2"]);
// 倒计时
// 兑换订单不需要

const time = ref(30 * 60 * 60 * 1000);
const list = ref([
  {
    title: "订单详情",
    zhuangtai: "订单编号：64589456491",
    site: "创意卫浴五件套 欧式高档卫生间洗漱...",
    time: "2019-8-6 11:14:15",
    img: "../../img/门店图片/u2732.png",
    price:"400"
  },
  {
    title: "订单详情",
    zhuangtai: "订单编号：64589456491",
    site: "创意卫浴五件套 欧式高档卫生间洗漱...",
    time: "2019-8-6 11:14:15",
    img: "@/img/门店图片/u2732.png",
    price:"400"
  },
  {
    title: "订单详情",
    zhuangtai: "订单编号：64589456491",
    site: "创意卫浴五件套 欧式高档卫生间洗漱...",
    time: "2019-8-6 11:14:15",
    img: "@/img/门店图片/u2732.png",
    price:"400"
  },
  {
    title: "订单详情",
    zhuangtai: "订单编号：64589456491",
    site: "创意卫浴五件套 欧式高档卫生间洗漱...",
    time: "2019-8-6 11:14:15",
    img: "@/img/门店图片/u2732.png",
    price:"400"
  },
  {
    title: "订单详情",
    zhuangtai: "订单编号：64589456491",
    site: "创意卫浴五件套 欧式高档卫生间洗漱...",
    time: "2019-8-6 11:14:15",
    img: "@/img/门店图片/u2732.png",
    price:"400"
  },
  {
    title: "订单详情",
    zhuangtai: "订单编号：64589456491",
    site: "创意卫浴五件套 欧式高档卫生间洗漱...",
    time: "2019-8-6 11:14:15",
    img: "@/img/门店图片/u2732.png",
    price:"400"
  },
]);

const listDefinition = defineProps({
  Btnfalg: {
    default: true,
  },
  Btnfalg1: {
    default: true,
  },
  Btntext: {
    type: String,
    default: "取消订单",
  },
  Btntext1: {
    type: String,
    default: "提醒接单",
  },
  flag:{
    default: false
  },
  flag1:{
    default: true
  },
  flag2:{
    default:true
  },
  flag3:{
    default:true
  },
  flag4:{
    default:true
  },

});
</script>

<style lang="less" scoped>
.P44444444{
  position: absolute;
  top: 85px;
  right: 10px;
  // background-color: red;
}
.P3{
  position: relative;
  top: 7px;
  left: 80px;
}
.price{
  color: #FF5E81;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  bottom: 60px;
  right: 20px;
}
.time{
  color: #ccc;
  text-indent: 80px;
  position: relative;
  top: 0px;
  span{
    float: right;
    position: relative;
    top: -35px;
    left: -16px;
  }
}
.box {
  background-color: #eefdfa;
  width: 100vw;
  height: 100%;
  padding-top: 4vw;

}
.listdiv {
  // width: 90vw;
  height: 40vw;
  background-color: white;
  display: flex;
  flex-direction: column;
  // margin: 2.333vw;
  margin: 0 4vw 4vw 4vw;
  border-radius: 2%;
  position: relative;
  button {
    width: 18vw;
    height: 6vw;
    border-radius: 3.15vw;
    border: 1px solid pink;
    background-color: #f95474;
    font-size: 1.867vw;
    color: white;
    position: absolute;
    bottom: 2.333vw;
    right: 2.333vw;
    // line-height: 6vw;
  }
  .butn1 {
    right: 22vw;
    background-color: white;
    color: #f95474;
  }
  .p1 {
    padding-left: 5vw;
    margin-left: 5vw;
    position: relative;
    margin-top: 2.333vw;
    border-left: 1vw solid red;
    font-weight: bolder;
    span {
      position: absolute;
      right: 3.667vw;
      font-size: 1.333vw;
      padding-top: 0.567vw;
      color: #ccc;
    }
  }
  .listdivImg {
    display: flex;
    margin-top: 5vw;
    margin-left: 5vw;
    img {
      width: 18.667vw;
      height: 18.667vw;
    }
    .listdivImgp {
      margin-left: 5.667vw;
      color: #ccc;
      font-size: 3.333vw;
      .p2 {
        display: flex;
      }
      :first-child {
        font-size: 3.333vw;
        color: black;
        margin-bottom: 2.333vw;
      }
      :last-child {
        margin-top: 2.333vw;
      }
    }
  }
}
.van-tabs van-tabs--line {
  background-color: #eefdfa;
}

</style>
